<template>
    <div id="collect">
      <v-touch v-on:swipeleft="swiperleft"  v-on:swiperight="swiperright" class="wrapper">
        <!--编辑按钮-->
       <div v-show="$store.state.collect.length!==0" class="compile" @click="compileClick">
        <span v-show="!compile">编辑</span><span v-show="compile">完成</span>
      </div>
       <!--未登录时显示-->
        <div v-if="!$store.state.isLogin" class="not-login-img">
        <img src="../../../assets/imgs/bookrack/login-more.png" alt="">
        <div @click="login">登录</div>
      </div>
        <!--收藏的漫画-->
        <div class="collect-comic">
        <div  @click="detail(item)" class="comic-item" v-for="(item,index) in $store.state.collect" :key="index">
          <div class="img-bar">
            <img :src="item.imgUrl" alt="">
            <!--遮罩层-->
            <div class="comic-compile" v-show="compile" @click="item.check = !item.check">
              <img v-show="!item.check" src="../../../assets/imgs/bookrack/未选中.png" alt="">
              <img v-show="item.check" src="../../../assets/imgs/bookrack/选中.png" alt="">
            </div>
          </div>
          <p class="comic-name">{{item.name}}</p>
          <p class="comic-txt">{{comicTxt}}/{{item.beUpdateTo}}话</p>
        </div>
        <div class="add-bar" @click="addComic" v-if="$store.state.isLogin" v-show="!compile">
          <img src="../../../assets/imgs/bookrack/add.png" alt="">
        </div>
      </div>
        <!--底部编辑按钮-->
        <div v-show="compile&&$store.state.collect.length!==0" class="compile-txt">
        <div @click="allCheckClick"><p v-show="!allcheck">全选</p><p v-show="allcheck">取消全选</p></div>
        <div @click="deletebtn" :class="{del:delState}">删除 <span v-show="isdelete"></span></div>
      </div>
      </v-touch>
    </div>
</template>

<script>
    export default {
        name: "Collect",
      data(){
        return{
          compile:false,
          comicTxt:'未看',
          allCheck:false,
          delState:false,
        }
      },
      created(){
      },
      computed:{
          //删除按钮状态
        isdelete(){
          for (var i = 0; i < this.$store.state.collect.length; i++) {
            if(this.$store.state.collect[i].check){
              this.delState = true
              return
            }
          }
          this.delState = false
        },
          //全选状态
        allcheck(){
          for (var i = 0; i < this.$store.state.collect.length; i++) {
            if(this.$store.state.collect[i].check){
            }else{
              this.allCheck = false
              return false
            }
          }
          return true
        },
        //删除状态

      },
      activated(){
          //进入路由时，如果收藏有数据则给每个数据增加一个key值
        if(this.$store.state.collect.length==0){
          return
        }
        for (var i = 0; i < this.$store.state.collect.length; i++) {
          this.$set(this.$store.state.collect[i],'check',false)
        }
        // console.log(this.$store.state.collect);
      },
      deactivated(){
          this.compile = false
      },
      methods:{
        swiperleft: function () {
          this.$router.push({'path': '/bookrack/history'});
        },
        swiperright: function () {
          this.$router.push({'path': '/find'});
        },
        addComic(){
          this.$router.push('/find/classify')
        },
          //删除选中的漫画
        deletebtn(){
          this.$messagebox({
            title: '是否取消追漫?',
            message: '其他分组中的追漫也将一并取消',
            showCancelButton: true,
            confirmButtonText:"删除",
            confirmButtonClass:'confirmButton',
            cancelButtonText:"关闭"
          }).then(action => {

            if(action == 'confirm'){
              for (var i = 0; i < this.$store.state.collect.length; i++) {
                if(this.$store.state.collect[i].check){
                  this.$store.state.collect.splice(i,1)
                  // 使用splice方法删除会使后面的数据位置前进 1（删除的数量）
                  i = i-1
                }
              }
              this.compileClick()
            }else{

            }
          })

        },
          //跳转详情页
        detail(obj){
          if(this.compile){
            return
          }
          this.$router.push({name:'Detail',query:obj})
        },
          // 全选
        allCheckClick(){
          if(this.allCheck){
            for (var i = 0; i <this.$store.state.collect.length; i++) {
              this.$store.state.collect[i].check = false
            }
            this.allCheck = false
          }else{
            for (var i = 0; i <this.$store.state.collect.length; i++) {
              this.$store.state.collect[i].check = true
            }
            this.allCheck = true
          }
        },
        //点击完成或编辑 清除选中/进入编辑状态
        compileClick(){
          if(this.compile){
            for (var i = 0; i < this.$store.state.collect.length; i++) {
              this.$store.state.collect[i].check = false
            }
          }
          this.compile = !this.compile
        },
        login(){
          this.$router.push('/login')
        },
      },

    }
</script>

<style lang="less">
@import "../../../assets/css/bookrack/collect";
</style>
